<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <!-- <script src="https://cdn.jsdelivr.net/npm/zrender@4.3.0/dist/zrender.js"></script> -->
    <script src="./zrender.js"></script>

    <title></title>
</head>

<body>
    <div id="container" style="height: 700px; width: 800px;"></div>


    <script>
        var zr = zrender.init(document.getElementById('container'));
    

        var w = zr.getWidth();
        var h = zr.getHeight();


       
        var rect=new zrender.Rect({
    shape:{
        x:300,
        y:250,
        width:450,
        height:250,
    },
            style: {
                fill: 'black',
                stroke: 'none',
                
            },
           
            z: 1,
        });
var head = new zrender.Ellipse({
            shape: {
                cx: w / 1.5,
                cy: h / 3,
                rx: 160,
                ry: 130
            },
            style: {
                fill: 'white',
                stroke: '#000',
                lineWidth: 8,
            },
            z:1,
        });
           
    var zui = new zrender.Arc({
            shape: {
                cx: 530,
                cy: 220,
                r: 60,
                startAngle: -35,
                clockwise: false,
            },
            style: {
                stroke: '#000000',
                lineWidth: 6,
            },
            z: 1,
        });

           
        
        var yan=new zrender.Circle({
            shape:{
                cx:190,
                cy:-20,
                r:10
            },
            style:{
                fill:'black'
            },
            position: [w/3 , h/3],
               z:1,
        })
        var yan1 = new zrender.Heart({
      shape: {
        cx:310,
        cy:-50,
        width: 15,
        height: 15
      },
      style:{
fill:'black'
      },
      position: [w/3 , h/3],
               z:1,
      
    });
    var er1=new zrender.Circle({
            shape:{
                cx:w/2-180,
                cy:h/2-400,
                r:45
            },
            style:{
                fill:'black'
            },
            position: [w/4 , h/4],
             
        });
        var er2=new zrender.Circle({
            shape:{
                cx:w/2+50,
                cy:h/2-400,
                r:45
            },
            style:{
                fill:'black'
            },
            position: [w/4 , h/4],
             
        });
       




zr.add(rect)
zr.add(head)
zr.add(zui)
zr.add(yan)
zr.add(yan1)
zr.add(er1)
zr.add(er2)




    </script>
</body>

</html>
